<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window.onload与$(document).ready()</title>
	</head>
	<body>
		<h1>测试window.onload与$(document).ready()</h1>
		<img id="logo" src="img/1.jpg"/><!--应该为网络图片-->
		
		<!-- 区别:window.onload与$(document).ready()
		  window.onload
		    包括页面的图片加载完成后才会回调(晚)
		  $(document).ready()
		    等同于:$(function(){})
			页面加载完就回调(早)
			可以有多个监听回调 -->
		<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			// 需求:
			// 1.直接打印img的宽度,观察其值
			// 2.在$(function(){})中打印img的宽度
			// 3.在window.onload中打印宽度
			// 4.在img加载完成后打印宽度
			
			// 1.直接打印img的宽度,观察其值
			console.log('直接',$('#logo').width())
			
			window.onload = function(){
				console.log('onload',$('#logo').width())
			}
			window.onload = function(){
				console.log('onload2',$('#logo').width())
			}
			
			$(function(){
				console.log('ready',$('#logo').width())
			})
			$(function(){
				console.log('ready2',$('#logo').width())
			})
			
			$('#logo').on('load',function(){
				console.log('img load',$(this).width())
			})
			
			// $(document).ready(function(){
				
			// })
		</script>
	</body>
</html>
